import React from "react";
import styles from '@/assets/css/order_info.module.css';
import type business from '@/types/business';
import { useSearchParams } from 'react-router-dom';

interface GuestInfo {
    id: number;
    busid: number;
    nickname: string;
    mobile: string;
    gender: string;
    gender_text: string;
}

interface RoomInfo {
    starttime_text?: string;
    startday_text?: string;
    endtime_text?: string;
    endday_text?: string;
    order_day?: number;
    price?: string;
    origin_price?: string;
    type_text?: string;
    remark?: string;
    room?: {
        thumb_text?: string;
        name?: string;
        type?: string;
        area?: string;
        capacity?: string;
    };
}

const OrderInfo = () => {
    const [business] = React.useState<business>(React.Cookies.load('business'));
    const [guest, SetGuest] = React.useState<GuestInfo[]>([]);
    const [searchParams] = useSearchParams();
    const [room, SetRoom] = React.useState<RoomInfo>({});

    // 评分
    let rate = 5

    const CommentView = () => {
        if (rate > 0) {
            return (
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>评价信息：</div>
                    <div className={styles.comment}>
                        <React.UI.Rate value={5} readOnly />

                        <React.UI.Divider
                            style={{
                                color: '#1677ff',
                                borderColor: '#1677ff',
                                borderStyle: 'dashed',
                            }}
                        ></React.UI.Divider>

                        <React.UI.TextArea className='textarea' placeholder="请输入评论内容" defaultValue="非常好" readOnly />
                    </div>
                </div>
            )
        }
        else {
            return (<></>)
        }
    }

    const GetGuest = async () => {
        const result = await React.Http.post('/order/guest', {
            id: business.id,
            orderid: searchParams.get('orderid')
        });
        
        if (result.code === 1 && result.data) {
            SetGuest(result.data.guests || []);
            SetRoom(result.data.order || {});
        }
    }

    React.useEffect(() => {
        GetGuest()
    }, [])
    
    return (
        <>
            <div className={styles.order_info}>
                <div className={styles.info_content}>
                    <div className={styles.content_title}>订单信息：</div>
                    <div className={styles.content_item}>
                        <p>入住时间</p>
                        <div>{room.starttime_text} {room.startday_text} - {room.endtime_text} {room.endday_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住天数</p>
                        <div>共 {room.order_day} 晚</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单价格</p>
                        <div className={styles.content_price}>￥{room.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>房间单价</p>
                        <div className={styles.content_price}>￥{room.origin_price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>支付方式</p>
                        <div>{room.type_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住人数</p>
                        <div>{guest.length} 人</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单备注</p>
                        <div>{room.remark || '无'}</div>
                    </div>
                </div>
                {/* 房间信息 */}
                {room.room && (
                    <div className={styles.info_footer}>
                        <div className={styles.content_title}>房屋信息：</div>
                        <div className={styles.detail}>
                            <div className={styles.thumb}>
                                {room.room.thumb_text && <img src={room.room.thumb_text} alt="房间图片" />}
                            </div>
                            <div className={styles.right}>
                                <p>{room.room.name || '未知房型'}</p>
                                <div className={styles.tips}>
                                    {room.room.type && <React.UI.Tag color='primary'>{room.room.type}</React.UI.Tag>}
                                    {room.room.area && <React.UI.Tag color='primary'>{room.room.area}</React.UI.Tag>}
                                    {room.room.capacity && <React.UI.Tag color='primary'>宜住{room.room.capacity}人</React.UI.Tag>}
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* 入住信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>住客信息：</div>
                    <div className={styles.detail}>
                        <React.UI.List className={styles.list}>
                            {guest && guest.length > 0 ? (
                                guest.map((item: GuestInfo) => (
                                    <React.UI.List.Item
                                        key={item.id}
                                        description={`手机号码：${item.mobile}`}
                                    >
                                        {item.nickname}({item.gender_text})
                                    </React.UI.List.Item>
                                ))
                            ) : (
                                <React.UI.Empty description="暂无住客信息" />
                            )}
                        </React.UI.List>
                    </div>
                </div>

                {/* 评价信息 */}
                <CommentView />
            </div>
        </>
    )
}

export default OrderInfo;
